
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref, toRefs, onMounted, computed, watch } from 'vue'
import { Api } from '../../assets/api/';
import CouponComp from '../../components/ProductDetailsComps/CouponComp.vue';
import type { Popovers, Outers } from '../../typings'
import { useShoppingStore } from '../../stores/shopping'
import { useOrderListStore } from '../../stores/orderList'
import { showToast } from 'vant';
import 'vant/es/toast/style'


const router = useRouter()
const props = defineProps<{
    id: string
}>()

const productList = ref()
const couponList = ref<{
    popovers: Array<Popovers> | [],
    outers: Array<Outers> | []
}>()
let showPopup = ref(false)
const imgIndex = ref(1)
let isExhibitionImg = ref(true)

// 获取商品详情
const getProductDetails = async (currentId = props.id) => {
    productList.value = ''
    let { data } = await Api.getProductDetailList(currentId)
    productList.value = data.data.result
    console.log(productList.value);

    defaultPrice.value = data.data.result.skuInfo.defaultPrice
    totalStock.value = data.data.result.skuInfo.totalStock

}
// 优惠券
const getCouponList = async (currentId = props.id) => {
    let { data } = await Api.getProductCoupon(currentId)
    couponList.value = data.data.flushKey.data
    console.log(couponList.value);


}
const onChange = (index: number) => imgIndex.value = index;

const changeIndex = (index: number) => {
    imgIndex.value = index
    isExhibitionImg.value = false
}
onMounted(() => {
    getProductDetails()
    getCouponList()
})

// 是否展示商品选择参数
let showSku = ref(false)
// 当前选择款式的图片索引
let skuImgIndex = ref()
let defaultPrice = ref()
// 总库存
let totalStock = ref()
// 当前款式
let currentColor = ref()
// 当前款式的库存
let curretnStock = ref()
// 当前款式的尺码id
let currentStyleId = ref()
// 当前尺码id
let currentStockId = ref()
// 当前尺码
let curretnSize = ref()
// 商品数量
let quantityNum = ref(1)
// 选中颜色尺码后的价格
let selectedPrice = ref()

const changeSkuImgIndex = (i: number, color: string) => {

    selectedPrice.value = undefined
    if (currentColor.value == color) {
        skuImgIndex.value = undefined
        currentColor.value = undefined
        currentStyleId.value = undefined
        curretnSize.value = ''
        console.log(2);
        if (!productList.value.skuInfo.sizeKey) {
            console.log(1);
            
            selectedPrice.value = (productList.value.skuInfo.skus[i].nowprice)/100
        }

    } else {
        skuImgIndex.value = i
        currentColor.value = color
        currentStyleId.value = i + 1
        curretnSize.value = ''
    }
}
const changeSize = (stockNum: number, stockId: string, size: string) => {
    if (stockId == currentStockId.value) {
        curretnStock.value = undefined
        currentStockId.value = undefined
        curretnSize.value = undefined
        selectedPrice.value = undefined
    } else {
        curretnStock.value = stockNum
        currentStockId.value = stockId
        curretnSize.value = size

        if (currentColor) {
            productList.value.skuInfo.skus.map((item: { nowprice: number, stockId: string }) => {
                if (item.stockId == stockId) {
                    selectedPrice.value = item.nowprice / 100
                }
            })
        }

    }

}

// 库存的计算
const stock = computed(() => {
    let num = ref(0)

    if (curretnStock.value) {
        num.value = curretnStock.value
    } else {

        productList.value.skuInfo?.skus.map((item: { stock: number, styleId: number }) => {

            if ((skuImgIndex.value || skuImgIndex.value == 0) && skuImgIndex.value + 1 == item.styleId) {
                num.value += item.stock
                // console.log(item.stock);
            }
        })
    }
    return num.value
})

watch(() => props.id, (n, o) => {

    if (n != o) {
        skuImgIndex.value = undefined
        currentColor.value = ''
        curretnStock.value = ''
        currentStyleId.value = ''
        currentStockId.value = ''
        curretnSize.value = ''
        getProductDetails(n)
        getCouponList(n)
        isStar.value = false
        collectionList.value.map(t => {
            if (t.tradeItemId == props.id) {
                isStar.value = true
            }
        })

    }
})

//pinia购物车值
const { shoppingCartList } = toRefs(useShoppingStore())
// console.log(shoppingCartList.value);
const { addShoppingCartList } = useShoppingStore()

// 加入购物车
const addShoppingCart = () => {

    if (selectedPrice.value) {
        let productObj = {
            itemId: props.id,
            stockId: currentStockId.value,
            title: productList.value.skuInfo.title,
            styleKey: productList.value.skuInfo.styleKey,
            sizeKey: productList.value.skuInfo.sizeKey,
            num: quantityNum.value,
            curretnSize: curretnSize.value,
            currentColor: currentColor.value,
            nowprice: selectedPrice.value,
            text: productList.value.delayExpress.defaultData?.textLine2,
            img: productList.value.skuBarInfo.list[skuImgIndex.value].image,
            selectedStatus: false
        }

        addShoppingCartList(productObj)
        showToast('添加成功')
    } else {
        showSku.value = true
    }


}

// 收藏
let isStar = ref(false)
const { addCollection, delCollection } = useOrderListStore()
const { collectionList } = toRefs(useOrderListStore())
onMounted(() => {
    isStar.value = false
    collectionList.value.map(t => {
        if (t.tradeItemId == props.id) {
            isStar.value = true
        }
    })
})
const addCurrentCollection = () => {
    isStar.value = !isStar.value
    if (isStar.value) {
        let obj = JSON.parse(localStorage.currentCollection)
        addCollection(obj)
        showToast('已收藏')
    } else {
        delCollection(props.id)
        showToast('已取消收藏')

    }
}

// 转换时间戳方法
const getTime = (timeStamp: number) => {
    let data = new Date(timeStamp)
    let y = data.getFullYear() >= 10 ? data.getFullYear() : '0' + data.getFullYear()
    let m = data.getMonth() + 1 >= 10 ? data.getMonth() + 1 : '0' + (data.getMonth() + 1)
    let d = data.getDate() >= 10 ? data.getDate() : '0' + data.getDate()

    return `${y}-${m}-${d}`
}
const introduceIndex = ref(0)

// 提交订单
const goToOrder = () => {
    console.log(curretnSize.value);
    
    if (selectedPrice.value) {
        let productObj = {
            itemId: props.id,
            stockId: currentStockId.value,
            title: productList.value.skuInfo.title,
            styleKey: productList.value.skuInfo.styleKey,
            sizeKey: productList.value.skuInfo.sizeKey,
            num: quantityNum.value,
            curretnSize: curretnSize.value,
            currentColor: currentColor.value,
            nowprice: selectedPrice.value,
            text: productList.value.delayExpress.defaultData?.textLine2,
            img: productList.value.skuBarInfo.list[skuImgIndex.value].image,
            selectedStatus: false
        }
        router.push({
            name: 'order',
            params: {
                list: JSON.stringify([productObj]),
            }
        })

    } else {
        showSku.value = true
    }

}


</script>


<template>
    <div class="product-details relative pb-14">


        <!-- 展示图片 -->
        <div class="sp-exhibition-content">


            <div v-show="productList" class="swipe-div relative pl-2">
                <van-swipe class=" text-center pl-6" :initial-swipe="imgIndex" v-show="isExhibitionImg"
                    :show-indicators="false" :loop="true" :width="300" :height="390">

                    <van-swipe-item @change="onChange" v-for="(img, i) in productList?.topImages" :key="i">
                        <img :v-lazy="img" class="pl-2 w-full h-full" :src="img" alt="">
                    </van-swipe-item>

                </van-swipe>


                <van-swipe  v-show="!isExhibitionImg" @change="onChange" :show-indicators="false"
                    :loop="true" :width="320" :height="390">
                    <van-swipe-item v-for="(img, i) in productList?.skuBarInfo?.list" :key="i">
                        <img :v-lazy="img.image" class="px-2 w-full h-full" :src="img.image" alt="">
                    </van-swipe-item>

                </van-swipe>


                <div v-show="!isExhibitionImg"
                    class="img-drsc absolute left-1/2 bottom-5 whitespace-nowrap  rounded-full text-center py-1 px-3 text-white"
                    style="transform: translateX(-60%);background-color: rgba(0,0,0,.5);">
                    {{ productList?.skuBarInfo?.list[imgIndex].label }}
                </div>

            </div>

            <van-skeleton class="pl-10" v-show="!productList">
                <template #template>
                    <div :style="{ display: 'flex', width: '320px', height: '390px' }">
                        <van-skeleton-image class=" w-full h-full" />
                        <div :style="{ flex: 1, marginLeft: '16px' }">
                        </div>
                    </div>
                </template>
            </van-skeleton>


            <div v-show="productList" class="label-img flex px-2 pt-2"
                style="border-bottom: 2px solid rgba(200,200,200,.2);">

                <div class="example-img flex justify-between items-center">
                    <img :v-lazy="productList?.skuBarInfo?.list[0].image" @click="isExhibitionImg = true"
                        :class="{ 'active-img': isExhibitionImg }" :src="productList?.skuBarInfo?.list[0].image" alt="">

                    <div class=" text-sm w-8 text-gray-400 ">
                        {{ productList?.skuBarInfo?.labelV2 }}
                    </div>
                </div>

                <ul class="flex">

                    <li :class="{ 'active-img': !isExhibitionImg && imgIndex == i }" @click="changeIndex(i)"
                        v-for="(s, i) in productList?.skuBarInfo?.list" :key="s.stockId">
                        <img :src="s.image" :v-lazy="s.image" alt="">
                    </li>
                </ul>

            </div>

            <van-skeleton v-show="!productList" class="felx items-center" avatar-size="40px" style=" width: 150vw; " avatar
                :row="2" />
        </div>

        <!-- 右侧那几个icon -->
        <div class="icon-div flex flex-col items-end  pr-2  fixed left-80 top-10 z-10">
            <span @click="router.push('/')" class=" p-2  rounded-full" style="background-color: rgba(0,0,0,.3);">
                <van-icon name="wap-home-o" size="22" color="#fff" />

            </span>

            <span @click="router.push('/shoppingcart')" class=" p-2 my-3 rounded-full"
                style="background-color: rgba(0,0,0,.3);">
                <van-icon name="cart-o" size="22" color="#fff" />
            </span>

            <!-- <span class=" p-2  rounded-full" style="background-color: rgba(0,0,0,.3);">
                                                                                                <van-icon name="star-o" size="22" color="#fff" />
                                                                                                <van-icon v-show="isStar" name="star" size="22" color="red" />
                                                                                            </span> -->
        </div>

        <!-- 商品详情等 -->
        <div class="sp-information flex flex-col my-2 w-full pb-5 border-b-8 border-gray-100" v-show="productList">
            <!-- 价格 -->
            <div class="sp-totle-price flex justify-between items-center h-8 px-3">

                <div style="min-width: 45px;" class="price mr-2">
                    <span class=" text-xs">{{ productList?.normalPrice?.currency }}</span><span
                        class=" text-xl font-bold mx-0.5">{{ productList?.normalPrice?.nowPrice }}</span><span
                        class=" text-xs">{{ productList?.normalPrice?.highPriceDesc }}</span>
                </div>

                <div class="price-tags flex mx-1 flex-auto">
                    <span class="mr-0.5 text-sm leading-4 h-4" :style="{ color: p?.textColor, backgroundColor: p.bgColor }"
                        v-for="p in productList?.normalPrice?.priceTags" :key="p.text">{{ p.text }}</span>
                </div>

                <div class="sales text-gray-400 text-xs ">
                    已售{{ productList?.normalPrice?.sales }}
                </div>
            </div>

            <!-- 优惠券 -->
            <div v-show="couponList?.outers.length != 0"
                class="sp-coupon flex justify-between items-center text-xs mt-2 px-2"
                :style="{ color: couponList?.outers[0]?.textColor || '#FF4466' }">
                <div class="text flex">

                    <span style=" background-color: rgb(255, 232, 238)" class="ml-1" v-for="(o, i) in couponList?.outers"
                        :key="i">
                        {{ o.text }}
                    </span>

                </div>

                <div class="coupon-list flex items-center" @click="showPopup = !showPopup">
                    <span>
                        领券
                    </span>
                    <van-icon name="arrow" />


                </div>
                <van-popup v-model:show="showPopup" position="bottom" :style="{ height: '60%' }">
                    <h3 class=" w-full text-center text-base font-bold py-2 text-black bg-white z-10 sticky top-0 left-1/2">
                        优惠
                    </h3>
                    <div class="comp-list w-full h-full p-3">

                        <CouponComp :list="c.data" v-for="c in couponList?.popovers" :key="c.data.promotionId">

                        </CouponComp>

                    </div>

                    <div style="background-color: #ff446d;"
                        class=" w-full py-3  text-base leading-4 text-white rounded-full btn sticky bottom-2 left-0 text-center">
                        确认
                    </div>

                </van-popup>
            </div>


            <!-- 标题 -->
            <div class="title flex justify-between items-center px-2 pb-3  mt-4 text-xs"
                style="border-bottom: 10px solid rgba(200,200,200,.2);">
                <span class=" w-4/5 text-sm font-normal">
                    {{ productList?.normalShareInfo?.title }}
                </span>
                <span class="flex items-center rounded-full text-gray-400 bg-gray-100 py-1 px-2">
                    <i><img class=" w-3 h-3 mr-1"
                            src="https://s10.mogucdn.com/mlcdn/c45406/191218_762ibk3def84blec68cbe4le770df_54x54.png"
                            alt=""></i> 帮我选
                </span>
            </div>

            <!-- 发货信息 -->
            <div class="shipping-information text-gray-400  mt-3 px-3 text-sm">

                <div class="size-color flex justify-between py-2" @click="showSku = true">
                    <span>选择</span>
                    <span :style="{ color: (currentColor || curretnSize) ? 'red' : '' }"
                        class="w-4/5 overflow-hidden text-ellipsis whitespace-nowrap text-black">{{
                            (currentColor || curretnSize) ? '已选：' + "'" + currentColor + "'" + "'" + curretnSize + "'" : '尺码 颜色'
                        }}</span>

                    <i>
                        <van-icon name="arrow" />
                    </i>
                </div>

                <div class="shipping flex">
                    <span>发货</span>
                    <div class="right ml-3">
                        <span :style="{ color: productList?.delayExpress?.defaultData?.textColor1 }">{{
                            productList?.delayExpress?.defaultData?.textLine1 }}</span>

                        <p class="mt-0.5" :style="{ color: productList?.delayExpress?.defaultData?.textColor2 }">
                            {{ productList?.delayExpress?.defaultData?.textLine2 }}</p>
                    </div>
                </div>

                <div class="postage flex justify-between my-4">
                    <span>
                        {{ productList?.itemServices?.columns[1]?.desc }}

                    </span>
                    <span>
                        {{ productList?.itemServices?.columns[2]?.desc }}

                    </span>
                </div>

                <div class="service flex">
                    <span class=" w-8">
                        服务
                    </span>
                    <div class="desc ml-3 text-black ">
                        <span class="px-2" :style="{ 'border-left': i == 0 ? '' : '1px solid black' }"
                            v-for="(n, i) in  productList?.itemServices?.services" :key="i">
                            {{ n.name }}

                        </span>

                    </div>
                </div>

                <!-- 商品列表 -->
                <div class="sku">
                    <van-popup  v-model:show="showSku" position="bottom" :style="{ height: '70%' }">

                        <div class="sku-popup px-3 pb-3 relative  text-black">
                            <!-- 上边的图片和价格等 -->
                            <div class="title-top flex sticky bg-white top-0 py-1">

                                <div class="img  ">
                                    <img v-show="!skuImgIndex" style="width: 90px; height: 120px;"
                                        :src="productList.skuBarInfo?.list[0]?.image" alt=""
                                        :v-lazy="productList.skuBarInfo?.list[0]?.image">

                                    <img v-show="skuImgIndex" style="width: 90px; height: 120px;"
                                        :src="productList.skuBarInfo?.list[skuImgIndex]?.image"
                                        :v-lazy="productList.skuBarInfo?.list[skuImgIndex]?.image" alt="">
                                </div>

                                <div class="right ml-4 text-xs flex flex-col justify-around py-3">
                                    <span class=" text-lg">{{ selectedPrice ? '￥' + selectedPrice : defaultPrice }}</span>
                                    <p>库存: {{ stock ? stock : totalStock }} 件</p>
                                    <p>
                                        <span :style="{ color: currentColor ? 'red' : '' }">颜色： {{
                                            currentColor ? currentColor : '请选择颜色' }}</span>
                                    </p>
                                    <p>
                                        <span :style="{ color: curretnSize ? 'red' : '' }">尺码： {{
                                            curretnSize ? curretnSize : '请选择尺码' }}</span>
                                    </p>
                                </div>

                            </div>

                            <!-- 款式选择 -->
                            <div class="choice-color flex flex-col mt-4 text-xs">
                                <span class=" text-gray-400">{{ productList.skuInfo.props[0].label }}</span>
                                <ul class=" ">
                                    <li class=" my-3 mx-3 inline-block" v-for="(s, i) in productList.skuInfo.props[0]?.list"
                                        :key="s.stockId">
                                        <span @click="changeSkuImgIndex(i, s.name)"
                                            class="px-4 py-2 border border-gray-200 "
                                            :class="{ 'border-red-500 text-red-500': skuImgIndex == i }">
                                            {{ s.name }}
                                        </span>
                                    </li>
                                </ul>
                            </div>

                            <!-- 尺码选择 -->
                            <div class="size my-2 py-4 text-xs flex flex-col border-y border-gray-300 "
                                style="min-height: 10vh;">
                                <span class=" text-gray-400">{{ productList.skuInfo.sizeKey }}</span>
                                <ul class="flex flex-wrap mt-3">
                                    <li v-show="!currentStyleId">默认</li>
                                    <li @click="changeSize(s.stock, s.stockId, s.size)" v-show="currentStyleId == s.styleId"
                                        class=" mt-3  text-center  " v-for="s in productList.skuInfo?.skus"
                                        :key="s.stockId">
                                        <span :class="{ 'border-red-500 text-red-500': currentStockId == s.stockId }"
                                            class="py-1 px-3 border border-gray-200 mx-4">
                                            {{ s.size }}
                                        </span>
                                    </li>
                                </ul>

                            </div>
                            <!-- 数量 -->
                            <div class="quantity  py-4 border-b border-gray-300">

                                <span class="text-xs mr-2 text-gray-400">数量</span>
                                <van-stepper v-model="quantityNum" />
                            </div>

                        </div>
                        <div class="buy w-full sticky bottom-0 left-0 flex">

                            <span @click="addShoppingCart" class="w-1/2 text-center py-3  text-red-400"
                                style="background-color: #ffeeee;">加入购物车</span>
                            <span @click="goToOrder" class=" w-1/2 text-center py-3  text-white "
                                style="background-color: #ff557a;">立即购买</span>

                        </div>

                    </van-popup>
                </div>

            </div>

        </div>
        <van-skeleton title :row="5" v-show="!productList" />

        <!-- 评论 -->
        <div v-show="productList" class="comment border-b-8 border-gray-100">

            <div class="comment-title flex justify-between font-bold">
                <span>评论({{ productList?.rateInfoV2?.cRate }})</span>
                <span>评分<b class=" text-red-500">{{ productList?.rateInfoV2?.cScore }}</b> <van-icon color="#c9bdbd"
                        name="arrow" /></span>
            </div>

            <div class="label-list">
                <ul class="flex">
                    <li v-for="t in productList?.rateInfoV2?.rateTags" :key="t.labelId">{{ t.value }}({{ t.num }})</li>
                </ul>
            </div>

            <div class="comment-item-list ">
                <van-swipe :loop="false" :width="300" :height="100" class="my-swipe pr-10" indicator-color="white">

                    <van-swipe-item v-for=" r in productList?.rateInfoV2?.list" :key="r.created">
                        <div class="comment-item bg-gray-50 p-2 text-xs mr-2">

                            <div class="user flex">
                                <img class=" w-10 h-10 rounded-full" :src="r.user.avatar" alt="">
                                <div class="user-name ml-2">

                                    <span class=" text-sm">{{ r.user.uname }}</span>
                                    <p class=" text-gray-400">{{ getTime(r.created * 1000) }}</p>
                                </div>
                            </div>

                            <div class="content mt-2">
                                {{ r.content }}
                            </div>

                        </div>
                    </van-swipe-item>

                </van-swipe>


            </div>

        </div>
        <van-skeleton title :row="2" v-show="!productList" />
        <van-skeleton title avatar :row="2" v-show="!productList" />
        <!-- 店家 -->
        <div v-show="productList" class="shopkeeper flex text-xs p-2 border-b-8 border-gray-100">

            <img class=" w-16 h-16" :src="productList?.shopInfo?.shopLogo" alt="">
            <div class="shopkeeper-item flex flex-col justify-between ml-2 w-4/5">

                <div class=" text-sm font-bold flex justify-between">
                    <span>
                        {{ productList?.shopInfo?.name }}
                    </span>
                    <span>
                        进店
                        <van-icon name="arrow" />
                    </span>
                </div>
                <p class="my-1">{{ productList?.shopInfo?.saleDescV2 ? productList?.shopInfo?.saleDescV2 :
                    productList?.shopInfo?.saleDesc
                }}</p>

                <div class="shokeeper-label">
                    <ul>
                        <li class="rounded-full   text-red-500 border border-gray-300"
                            v-for="l in productList?.shopInfo?.shopLabels" :key="l.id">{{ l.text }}</li>


                    </ul>
                </div>
            </div>

        </div>
        <van-skeleton v-show="!productList">
            <template #template>
                <div :style="{ display: 'flex', width: '100%' }">
                    <van-skeleton-image />
                    <div
                        :style="{ flex: 1, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', marginLeft: '16px' }">
                        <van-skeleton-paragraph />
                        <van-skeleton-paragraph />
                        <van-skeleton-paragraph />
                    </div>
                </div>
            </template>
        </van-skeleton>


        <!-- 商品介绍 -->
        <div class="product-introduce">
            <van-tabs v-model:active="introduceIndex" scrollspy>
                <van-tab v-for="t in productList?.detailInfo?.detailImage" :title="t.key" :key="t.key">
                    <div class="content-list">
                        <img v-lazy="img" v-for="(img, i) in t.list" :src="img" :key="i" alt="">

                    </div>
                </van-tab>
            </van-tabs>

        </div>


        <!-- 下面购买加入购物车店铺收藏等 -->
        <div class="bottom-nav-bar w-full flex justify-between fixed bottom-0 left-0 bg-white">

            <div class="left-icon-div w-1/2  flex justify-around items-center text-xs">
                <span class=" px-3 py-1 flex flex-col text-center">
                    <van-icon name="shop-o" size="20" />
                    店铺
                </span>
                <span class=" flex flex-col text-center px-3 py-1 text-red-400  border-x border-gray-200">
                    <van-icon name="chat-o" color="#ff4466" size="20" />
                    客服
                </span>
                <span class=" px-3 py-1 flex flex-col text-center">
                    <van-icon @click="addCurrentCollection" v-show="!isStar" name="star-o" size="20" />
                    <van-icon @click="addCurrentCollection" v-show="isStar" size="20" name="star" color="red" />
                    <b>
                        {{ isStar ? '已收藏' : '收藏' }}
                    </b>
                </span>
            </div>

            <div class="right-div  w-1/2 flex">
                <span class="w-1/2 text-center py-3  text-red-400" @click="addShoppingCart"
                    style="background-color: #ffeeee;">加入购物车</span>
                <span @click="goToOrder" class=" w-1/2 text-center py-3  text-white "
                    style="background-color: #ff557a;">立即购买</span>
            </div>

        </div>

    </div>
</template>

<style lang="scss" scoped>
.product-details {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: 10;
    overflow-y: auto;

    &::-webkit-scrollbar {
        display: block;
    }

    .label-img {
        width: 100%;

        .example-img {
            display: flex;
            width: 95px;
            height: 38px;
            align-items: center;

            img {
                flex: 0 0 38px;
                height: 100%;
                border-radius: 50%;
            }

            span {
                width: 40px;
                margin: 0 10px;
                color: #aaa;
            }
        }

        ul {
            width: 80vw;
            overflow-x: auto;

            &::-webkit-scrollbar {
                display: block;
            }

            li {
                flex: 0 0 38px;
                height: 38px;
                margin: 0 10px;
                border-radius: 50%;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
        }

        .active-img {
            border: 2px solid red;
        }
    }


    .comment {
        padding: 10px;

        .label-list {
            ul {
                width: 99%;
                overflow-x: auto;

                &::-webkit-scrollbar {
                    display: block;
                }

                li {
                    font-size: 12px;
                    padding: 5px;
                    color: #000;
                    background-color: #fff6f6;
                    margin: 5px;
                    white-space: nowrap;
                }
            }
        }
    }

    .shopkeeper {
        .shokeeper-label {
            width: 100%;

            ul {
                width: 100%;
                display: flex;

                overflow-x: auto;

                &::-webkit-scrollbar {
                    display: block;
                }

                li {
                    margin-right: 9px;
                    height: 100%;
                    white-space: nowrap;
                    padding: 4px;
                }
            }
        }
    }
}
</style>